<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <title>AI 简历分析</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        /* 统一的CSS变量 */
        :root {
            --primary-color: #28A745; /* 改为绿色，象征成功和积极 */
            --primary-hover: #218838; /* 绿色悬停效果 */
            --text-color: #2D3748;
            --light-gray: #F7FAFC;
            --border-color: #E2E8F0;
            --error-color: #E53E3E;
            --success-color: #38A169;
            --secondary-btn-bg: #4C51BF;
            --secondary-btn-hover: #3C429B;
        }

        body {
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
            background-color: var(--light-gray);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2rem;
            margin: 0;
            color: var(--text-color);
        }

        /* 头部样式优化 */
        .header {
            width: 100%;
            max-width: 900px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2.5rem;
        }

        .header-logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-color);
            text-decoration: none;
        }

        .header-buttons {
            display: flex;
            gap: 0.75rem;
        }

        .header-buttons a,
        .header-buttons button {
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-size: 0.95rem;
            text-decoration: none;
            font-weight: 500;
            transition: background-color 0.3s ease, transform 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        /* 修改了 home-btn 的背景色和hover色 */
        .home-btn {
            background-color: var(--secondary-btn-bg);
            color: white;
            border: none;
        }
        .home-btn:hover {
            background-color: var(--secondary-btn-hover);
            transform: translateY(-2px);
        }

        .logout-btn {
            background-color: #E53E3E;
            color: white;
            border: none;
            cursor: pointer;
        }
        .logout-btn:hover {
            background-color: #C53030;
            transform: translateY(-2px);
        }

        .container {
            background-color: white;
            padding: 3rem;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
            width: 100%;
            max-width: 900px;
        }

        h2 {
            text-align: center;
            color: var(--text-color);
            margin-bottom: 2rem;
            font-weight: 600;
        }

        .error-message {
            color: var(--error-color);
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .form-container {
            margin-bottom: 2rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-color);
        }

        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.2);
        }

        /* 文件上传区域样式优化 */
        .file-upload-box {
            border: 2px dashed var(--border-color);
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.3s ease, background-color 0.3s ease;
            position: relative;
        }

        .file-upload-box.dragover {
            border-color: var(--primary-color);
            background-color: rgba(90, 103, 216, 0.05);
        }

        .file-upload-box input[type="file"] {
            display: none;
        }

        .upload-icon {
            font-size: 3rem;
            color: #9B9FA5;
            margin-bottom: 1rem;
            transition: color 0.3s ease;
        }

        .file-upload-box.dragover .upload-icon {
            color: var(--primary-color);
        }

        .file-upload-text {
            color: #6C757D;
            font-size: 1.1rem;
            margin: 0;
        }

        /* 文件上传成功状态的图标和文本 */
        .upload-success {
            color: var(--success-color);
            font-size: 3rem;
            margin-bottom: 1rem;
            animation: fadeIn 0.5s ease-in-out;
        }

        .upload-success-text {
            color: var(--success-color);
            font-weight: 600;
            font-size: 1.1rem;
        }

        .file-name-display {
            margin-top: 1rem;
            font-weight: 500;
            color: var(--text-color);
        }

        .btn-primary {
            width: 100%;
            padding: 0.75rem;
            border: none;
            border-radius: 8px;
            background-color: var(--primary-color);
            color: white;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .btn-primary:hover {
            background-color: var(--primary-hover);
            transform: translateY(-2px);
        }

        /* 修复后的禁用状态样式 */
        .btn-primary:disabled {
            background-color: var(--primary-color);
            opacity: 0.6; /* 降低透明度以示禁用 */
            cursor: not-allowed;
            transform: none;
        }

        .btn-secondary {
            width: 100%;
            margin-top: 1rem;
            padding: 0.75rem;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background-color: white;
            color: var(--text-color);
            font-weight: 600;
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }

        .btn-secondary:hover {
            background-color: var(--light-gray);
            border-color: #CBD5E0;
        }

        /* 大模型选择器样式 */
        .model-selector-container {
            background-color: #f8f9fa;
            padding: 1.5rem;
            border-radius: 12px;
            margin-bottom: 2rem;
        }

        .model-selector-title {
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text-color);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .model-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1rem;
        }

        .model-option {
            background: white;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            padding: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }

        .model-option:hover {
            border-color: var(--primary-color);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transform: translateY(-4px);
        }

        .model-option.selected {
            border-color: var(--primary-color);
            background-color: rgba(90, 103, 216, 0.05);
            box-shadow: 0 4px 12px rgba(90, 103, 216, 0.1);
            transform: translateY(-2px);
        }

        .model-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            color: #6c757d;
            transition: color 0.3s ease;
        }

        .model-option.selected .model-icon {
            color: var(--primary-color);
        }

        .model-name {
            font-weight: 500;
            margin-bottom: 0.25rem;
        }

        .model-description {
            font-size: 0.8rem;
            color: #6c757d;
        }

        /* 隐藏的单选按钮 */
        .model-radio {
            display: none;
        }

        /* 进度条样式 */
        .progress-container {
            width: 100%;
            display: none;
            flex-direction: column;
            align-items: center;
            margin-top: 2rem;
            text-align: center;
        }

        .progress-bar {
            width: 100%;
            height: 25px;
            background-color: var(--light-gray);
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .progress-bar-fill {
            height: 100%;
            width: 0%;
            background-color: var(--primary-color);
            transition: width 0.3s ease-in-out;
        }

        .loading-text {
            margin-top: 0.75rem;
            font-weight: 600;
            color: var(--primary-color);
            font-size: 1.1rem;
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 提示工具样式 */
        .tooltip-container {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        /* 移除 `.tooltip` 类，改为 `.tooltip-container` */
        .tooltip-text {
            visibility: hidden;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 8px;
            position: absolute;
            z-index: 1;
            bottom: 825%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            white-space: nowrap;
        }

        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="header">
    <a href="/dashboard" class="header-logo">
        <i class="bi bi-robot"></i> AI简历助手
    </a>
    <div class="header-buttons">
        <div sec:authorize="hasRole('ADMIN')">
            <a th:href="@{/admin/users}" class="home-btn">
                <i class="bi bi-gear"></i> 管理
            </a>
        </div>
        <form th:action="@{/logout}" method="post" class="d-inline">
            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
            <button type="submit" class="logout-btn">
                <i class="bi bi-box-arrow-right"></i> 登出
            </button>
        </form>
    </div>
</div>

<div class="container">
    <h2>AI 简历分析系统</h2>

    <div th:if="${error}" class="alert alert-danger error-message p-3 mb-4 rounded" role="alert">
        <i class="bi bi-exclamation-circle me-2"></i>
        <span th:text="${error}"></span>
    </div>

    <div class="model-selector-container">
        <div class="model-selector-title">
            <i class="bi bi-cpu"></i> 选择AI大模型
        </div>
        <div class="model-options">
            <label class="model-option selected" for="model-deepseek">
                <div class="model-icon"><i class="bi bi-robot"></i></div>
                <div class="model-name">DeepSeek</div>
                <div class="model-description">深度求索大模型</div>
                <input class="model-radio" type="radio" name="aiModel" id="model-deepseek" value="deepseek" checked>
            </label>
            <label class="model-option" for="model-douban">
                <div class="model-icon"><i class="bi bi-chat-dots"></i></div>
                <div class="model-name">豆包</div>
                <div class="model-description">火山引擎大模型</div>
                <input class="model-radio" type="radio" name="aiModel" id="model-douban" value="douban">
            </label>
            <label class="model-option" for="model-tongyi">
                <div class="model-icon"><i class="bi bi-lightbulb"></i></div>
                <div class="model-name">通义千问</div>
                <div class="model-description">阿里巴巴大模型</div>
                <input class="model-radio" type="radio" name="aiModel" id="model-tongyi" value="tongyi">
            </label>
        </div>
    </div>

    <div class="form-container" id="formContainer">
        <form id="uploadForm" method="post" enctype="multipart/form-data" th:action="@{/interview/process}">
            <input type="hidden" id="selectedModel" name="aiModel" value="deepseek">

            <div class="form-group">
                <label for="jobDescription" class="form-label">职位描述</label>
                <textarea class="form-control" id="jobDescription" name="jobDescription"
                          rows="3" placeholder="请输入目标职位的描述..." required></textarea>
            </div>

            <div class="file-upload-box" id="fileDropZone">
                <div id="uploadPlaceholder">
                    <i class="bi bi-file-earmark-text upload-icon"></i>
                    <p class="file-upload-text">将您的 PDF 或 Word 简历文件拖放到这里</p>
                    <p class="file-upload-text">或 <a href="#" id="fileSelectLink">点击选择文件</a></p>
                </div>
                <div id="uploadSuccess" style="display: none;">
                    <i class="bi bi-check-circle upload-success"></i>
                    <p class="upload-success-text">文件已选择！</p>
                </div>
                <input type="file" id="resumeFile" name="resume" accept=".pdf,.doc,.docx" required>
            </div>

            <div id="fileNameDisplay" class="file-name-display mt-3 d-none">
                已选择文件: <span id="fileName"></span>
            </div>

            <div class="d-grid gap-2 mt-4 tooltip-container">
                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
                <button type="submit" id="submitBtn" class="btn btn-primary" disabled>开始分析</button>
                <span id="tooltipText" class="tooltip-text">请填写职位描述并上传简历文件</span>
            </div>
        </form>
    </div>

    <div class="progress-container" id="progressContainer">
        <div class="progress-bar">
            <div class="progress-bar-fill" id="progressBarFill"></div>
        </div>
        <p class="loading-text" id="loadingText">正在分析，请稍候...</p>
    </div>
</div>

<script>
    // 模型选择逻辑
    const modelOptions = document.querySelectorAll('.model-option');
    const modelRadios = document.querySelectorAll('.model-radio');
    const selectedModelInput = document.getElementById('selectedModel');
    const uploadForm = document.getElementById('uploadForm');
    const formContainer = document.getElementById('formContainer');
    const progressContainer = document.getElementById('progressContainer');
    const progressBarFill = document.getElementById('progressBarFill');
    const loadingText = document.getElementById('loadingText');

    // 文件上传相关逻辑
    const fileDropZone = document.getElementById('fileDropZone');
    const fileSelectLink = document.getElementById('fileSelectLink');
    const resumeFile = document.getElementById('resumeFile');
    const fileNameDisplay = document.getElementById('fileNameDisplay');
    const fileName = document.getElementById('fileName');
    const uploadPlaceholder = document.getElementById('uploadPlaceholder');
    const uploadSuccess = document.getElementById('uploadSuccess');
    const submitBtn = document.getElementById('submitBtn');
    const jobDescription = document.getElementById('jobDescription');
    const tooltipText = document.getElementById('tooltipText');

    // 检查表单是否可以提交
    function checkFormValidity() {
        const isReady = resumeFile.files.length > 0 && jobDescription.value.trim() !== '';
        submitBtn.disabled = !isReady;
        if (isReady) {
            tooltipText.style.visibility = 'hidden';
            tooltipText.style.opacity = '0';
        } else {
            tooltipText.style.visibility = 'visible';
            tooltipText.style.opacity = '1';
        }
    }

    // 监听职位描述输入变化
    jobDescription.addEventListener('input', checkFormValidity);

    // 文件选择变化时
    resumeFile.addEventListener('change', function() {
        if (this.files.length) {
            fileName.textContent = this.files[0].name;
            fileNameDisplay.classList.remove('d-none');
            uploadPlaceholder.style.display = 'none';
            uploadSuccess.style.display = 'block';
        } else {
            fileNameDisplay.classList.add('d-none');
            uploadPlaceholder.style.display = 'block';
            uploadSuccess.style.display = 'none';
        }
        checkFormValidity();
    });

    // 拖放功能
    fileDropZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('dragover');
    });

    fileDropZone.addEventListener('dragleave', function() {
        this.classList.remove('dragover');
    });

    fileDropZone.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('dragover');

        if (e.dataTransfer.files.length) {
            resumeFile.files = e.dataTransfer.files;
            fileName.textContent = e.dataTransfer.files[0].name;
            fileNameDisplay.classList.remove('d-none');
            uploadPlaceholder.style.display = 'none';
            uploadSuccess.style.display = 'block';
            checkFormValidity();
        }
    });

    // 点击链接触发文件选择
    fileSelectLink.addEventListener('click', function(e) {
        e.preventDefault();
        resumeFile.click();
    });

    // 模型选择
    modelOptions.forEach(option => {
        option.addEventListener('click', function() {
            modelOptions.forEach(opt => opt.classList.remove('selected'));
            this.classList.add('selected');
            const radio = this.querySelector('.model-radio');
            radio.checked = true;
            selectedModelInput.value = radio.value;
        });
    });

    // 表单提交处理
    uploadForm.addEventListener('submit', function(e) {
        e.preventDefault();
        if (!submitBtn.disabled) {
            formContainer.style.display = 'none';
            progressContainer.style.display = 'flex';

            // 模拟进度更新
            let progress = 0;
            const progressInterval = setInterval(() => {
                progress += Math.random() * 10;
                if (progress > 95) progress = 95;
                progressBarFill.style.width = `${progress}%`;
            }, 500);

            // 模拟进度条文本变化
            const textSteps = [
                "正在上传文件...",
                "解析简历中...",
                "匹配职位描述和简历...",
                "生成分析报告..."
            ];
            let textIndex = 0;
            loadingText.textContent = textSteps[textIndex];

            const textInterval = setInterval(() => {
                if (textIndex < textSteps.length - 1) {
                    textIndex++;
                    loadingText.textContent = textSteps[textIndex];
                }
            }, 3000);

            // 提交表单
            const formData = new FormData(uploadForm);
            fetch(uploadForm.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': formData.get('_csrf')
                }
            })
            .then(response => {
                if (response.ok) {
                    return response.text();
                } else {
                    throw new Error('分析失败，请稍后重试。');
                }
            })
            .then(html => {
                // 成功后跳转到新页面或显示结果
                document.open();
                document.write(html);
                document.close();
            })
            .catch(error => {
                clearInterval(progressInterval);
                clearInterval(textInterval);
                console.error('Error:', error);
                alert(error.message);
                formContainer.style.display = 'block';
                progressContainer.style.display = 'none';
                progressBarFill.style.width = '0%';
                loadingText.textContent = '正在分析，请稍候...';
            });
        }
    });

    // 页面加载时执行检查，确保按钮状态正确
    document.addEventListener('DOMContentLoaded', checkFormValidity);
</script>
</body>
</html>